<template>
    <div class="content-box">
        <div class="container">
            <!-- <el-button
                type="primary"
                @click="
                    login;
                    submitForm('loginForm');
                "
                >登录</el-button> -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="stock_id" label="股票代码" width="120"> </el-table-column>
                <el-table-column prop="stock_name" label="股票名称" width="200"> </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详细信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.submitForm();
    },
    methods: {
        handleClick(row) {
            this.$prompt('请输入卖出数量', '卖出股票', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '恭喜您卖出: ' + value + '股股票'
                    });
                    row.count -= value;
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '终止交易'
                    });
                });
        },



        //传输数据到后端
        submitForm() {
            
            // let config = {
            //     // 关于comnteng-type，看https://www.jb51.net/article/145209.htm
            //     headers: {
            //         //'Content-Type': 'application/json'  //默认是这个
            //         // 'Content-Type': 'multipart/form-data'
            //         'Content-Type': 'application/x-www-form-urlencoded'
            //     }
            // };
            // let data = { username: this.loginForm.userName, password: this.loginForm.passWord };

            // axios方式发送请求
            this.$axios
                .get('http://127.0.0.1:8000/api/check_collection/')
                .then(response => {
                    console.log(response.data);
                    this.tableData = response.data;
                    // if (response.data.code == 1) {
                    //     alert('login!');
                    //     this.$router.push({ path: '/zhuce' });
                    // } else {
                    //     alert('wrong username or password!');
                    // }
                })
                .catch(function(error) {
                    // 请求失败处理
                    console.log(error);
                });
        }
    },

    data() {
        return {
            tableData: []
        };
    }
};
</script>
